<template>
	<view class="template">
		<view class="template-list">
			<uni-load-more class="loading-class" iconType="auto" v-if="templateLoading" status="loading"
				color="#999999" />
			<view class="template-item" v-for="(item, index) in templateList" :key="index"
				@click="handleTemplateDetail(item)">
				<view class="template-item-text-title">
					<view class="template-item-text" :class="'bg' + index % 4">
						{{ item.name.substring(0,1) }}
					</view>
					<view class="template-item-title">{{ item.name }}</view>
				</view>
				<view class="handle-icon" @click.stop.prevent="handleEditProject(item)">
					<!-- <van-icon class="icon" name="ellipsis" /> -->
					<van-icon class="icon" name="ellipsis" />
				</view>
			</view>

			<view class="template-item create-template-item" @click="handleCreate">
				<view class="template-item-text-title">
					<van-icon class="icon" name="plus" />
					<view class="template-item-title">创建项目</view>
				</view>
			</view>

		</view>
		<!-- <button class="add-btn" @click="handleCreate">创建项目</button> -->

	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				templateList: [],
				actionSheetShow: true,
				templateLoading: false,
			}
		},
		onShow() {
			this.handleGetTemplateList();
		},
		onLoad() {
			getApp().showLoading();
			this.handleGetTemplateList();
		},
		methods: {
			handleCreate() {
				uni.navigateTo({
					url: '/packageB/template/create-project'
				})
			},
			// 获取模板列表
			async handleGetTemplateList() {
				var that = this;
				let rqs = {
					"pageSize": 999,
					"pageIndex": 1,
					"orderBy": ""
				};
				// that.templateLoading = true;
				await apiRqs._getShopTemplateList(rqs).then((res) => {
					// that.templateLoading = false;
					uni.hideLoading();
					console.log('模板列表', res);
					if (res.code == 200) {
						that.templateList = res.data.data;
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},
			// 进入模板详情
			handleTemplateDetail(item) {
				uni.setStorageSync("projectInfo", item);
				uni.navigateTo({
					url: "/packageB/template/detail"
				})
			},
			// 修改模板
			handleEditProject(item) {
				var that = this;
				uni.showActionSheet({
					itemList: ['重命名', '删除'],
					success(res) {
						if (res.tapIndex == 0) {
							// 点击了重命名
							uni.setStorageSync("projectInfo", item);
							uni.navigateTo({
								url: "/packageB/template/edit-template-project"
							})
						} else {
							uni.showModal({
								title: "提示",
								content: "确定删除此项目吗？",
								confirmColor: "#008aff",
								success(res) {
									if (res.confirm) {
										// 点击了删除
										getApp().showLoading();
										apiRqs._deleteTemplate(item.id).then((res) => {
											console.log('res', res);
											uni.hideLoading();
											if (res.code == 200) {
												that.handleGetTemplateList();
												getApp().showToast("删除成功", 'success');
											} else {
												getApp().showToast(res.msg);
											}
										}).catch((err) => {
											console.log('err', err)
										})
									}
								}
							})

						}
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			},
			onPullDownRefresh() {
				console.log('refresh');
				this.handleGetTemplateList();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.template {
		.popup-class {
			.action-list {
				display: flex;
				flex-direction: column;

				.action-item {
					padding: 15px 0;
					width: 100%;
					text-align: center;
					font-size: 15px;
					color: #666;
					border-bottom: 1px solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}

		.template-list {
			margin-bottom: calc(35pt + 40px + 15px);

			.loading-class {
				margin-top: 20px;
			}

			.template-item {
				display: flex;
				align-items: center;
				background-color: #fff;
				margin: 15px 20px;
				padding: 15px 20px;
				box-sizing: border-box;
				border-radius: 8px;
				box-shadow: 4px 0px 20px rgba(0, 0, 0, 0.05);

				&:active {
					background-color: #F1F1F1;
				}

				.template-item-text-title {
					flex: 1;
					display: flex;
					align-items: center;
					margin-right: 10px;

					.template-item-text {
						color: #fff;
						font-size: 16px;
						width: 32px;
						height: 32px;
						text-align: center;
						line-height: 32px;
						border-radius: 4px;

						&.bg0 {
							background-color: #FFB400;
						}

						&.bg1 {
							background-color: #3AC9C7;
						}

						&.bg2 {
							background-color: #99C552;
						}

						&.bg3 {
							background-color: #DC624E;
						}
					}

					.template-item-title {
						font-size: 14px;
						color: #3b4144;
						margin-left: 10px;
					}
				}

				&.create-template-item {
					justify-content: center;
					padding: 15px 20px;
					.template-item-text-title {
						justify-content: center;
						.template-item-title{
							font-size: 13px;
							color: #008aff;
							margin-left: 5px;
						}
						.icon{
							font-size: 12px;
							color: #008aff;
						}
					}
				}

				.handle-icon {
					width: 22px;
					flex: 0 0 22px;
					z-index: 99;

					.icon {
						font-size: 18px;
						color: #999;
					}
				}
			}


		}

		.add-btn {
			position: fixed;
			bottom: 40px;
			left: 20px;
			right: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 44pt;
			line-height: 44pt;

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
